<template>
  <v-chart ref="VChartRef" class="chart" :option="option" @click="onChartClick" autoresize />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { importEcharts, type BaseBarLineScatterECOption } from './util/ImportEcharts'
import VChart from 'vue-echarts'
import {
  buildBarLineScatterChartOption,
  type BarLineScatterChartOption
} from './util/BarLineScatterChartBuilder'
import type { VChartExposed } from './typing'
import type { ECElementEvent } from 'echarts/core'

importEcharts()

const $emits = defineEmits<{
  /**
   * # 图表点击事件
   *
   * @param evt 事件对象
   */
  chartClick: [evt: ECElementEvent]
}>()
const props = defineProps<{
  /**
   * # 图表配置
   * ---
   * 该配置非响应式
   */
  configOption: BarLineScatterChartOption
}>()
const VChartRef = ref<VChartExposed>()

const option: BaseBarLineScatterECOption = buildBarLineScatterChartOption(props.configOption)

function onChartClick(evt: ECElementEvent) {
  $emits('chartClick', evt)
}

function setEchartOption(option: BaseBarLineScatterECOption) {
  VChartRef.value?.setOption(option)
}
/**
 * # 手动控制显示指定系列值的tooltip
 * @param seriesIndex 第几条series
 * @param dataIndex 显示第几个数据的tooltip
 */
function showTip(seriesIndex: number, dataIndex: number) {
  console.log('VChartRef.value', VChartRef.value)
  VChartRef.value?.dispatchAction({ type: 'showTip', seriesIndex, dataIndex })
}
defineExpose({
  /**
   * # 更新echart配置
   */
  setEchartOption,
  /**
   * # 手动控制显示指定系列值的tooltip
   * @param seriesIndex 第几条series
   * @param dataIndex 显示第几个数据的tooltip
   */
  showTip
})
</script>

<style scoped></style>
